:root {
  /* 主要颜色变量 */
  --primary-start: #667eea;
  --primary-end: #764ba2;
  --primary-gradient: linear-gradient(135deg, var(--primary-start) 0%, var(--primary-end) 100%);
  
  /* 通用渐变模板 */
  --gradient-primary-light: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  --gradient-primary-medium: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  --gradient-primary-strong: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  
  /* 文本颜色 */
  --text-primary: #4a5568;
  --text-secondary: #718096;
  --text-error: #e53e3e;
  
  /* 背景颜色 */
  --bg-container: rgba(255, 255, 255, 0.95);
  --bg-border: rgba(255, 255, 255, 0.2);
  --bg-shimmer: var(--gradient-shimmer);
  
  /* QQ群组颜色 */
  --qq-bg: var(--gradient-primary-light);
  --qq-bg-hover: var(--gradient-primary-medium);
  --qq-border: rgba(102, 126, 234, 0.2);
  --qq-shadow: rgba(102, 126, 234, 0.2);
  
  /* 动画时长 */
  --duration-bg-shift: 20s;
  --duration-container-float: 6s;
  --duration-fade-in: 1.2s;
  --duration-text-slide: 1s;
  --duration-footer-fade: 1s;
  --duration-title-glow: 2s;
  --duration-shimmer: 3s;
  --duration-pulse: 2s;
  --duration-transition: 0.3s;
  
  /* 尺寸变量 */
  --container-max-width: 650px;
  --container-padding: 50px 40px;
  --container-margin: 20px;
  --container-border-radius: 24px;
  
  /* 响应式字体大小 */
  --font-size-title: clamp(1.8rem, 4vw + 1rem, 3rem);
  --font-size-subtitle: clamp(1rem, 2vw + 0.5rem, 1.2rem);
  --font-size-body: clamp(0.9rem, 1.5vw + 0.3rem, 1rem);
  --font-size-qq-group: clamp(0.85rem, 1.2vw + 0.2rem, 0.95rem);
  
  /* 阴影 */
  --shadow-container: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(31, 38, 135, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-qq-hover: 0 10px 25px var(--qq-shadow);
  
  /* 响应式断点 */
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 480px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

body {
  background: var(--primary-gradient);
  background-attachment: fixed;
  position: relative;
  will-change: transform;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  animation: backgroundShift var(--duration-bg-shift) ease-in-out infinite;
  will-change: transform;
}

@keyframes backgroundShift {
  0%, 100% { transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); }
  50% { transform: scale3d(1.1, 1.1, 1) rotate3d(0, 0, 1, 5deg); }
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
}

.container {
  text-align: center;
  padding: var(--container-padding);
  max-width: var(--container-max-width);
  margin: var(--container-margin);
  background: var(--bg-container);
  backdrop-filter: blur(20px);
  border-radius: var(--container-border-radius);
  border: 1px solid var(--bg-border);
  box-shadow: var(--shadow-container);
  animation: containerFloat var(--duration-container-float) ease-in-out infinite, fadeInUp var(--duration-fade-in) ease-out;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--bg-shimmer);
  animation: shimmer var(--duration-shimmer) infinite;
}

@keyframes containerFloat {
  0%, 100% { transform: translate3d(0, 0px, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale3d(0.95, 0.95, 1);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

h1 {
  font-size: var(--font-size-title);
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: clamp(20px, 4vw, 30px);
  letter-spacing: -0.02em;
  animation: titleGlow var(--duration-title-glow) ease-in-out infinite alternate;
  position: relative;
  will-change: transform, opacity;
}

@keyframes titleGlow {
  from { filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3)); }
  to { filter: drop-shadow(0 0 20px rgba(118, 75, 162, 0.5)); }
}

p {
  font-size: var(--font-size-subtitle);
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: clamp(25px, 5vw, 35px);
  font-weight: 400;
  animation: textSlideIn var(--duration-text-slide) ease-out 0.3s both;
  will-change: transform, opacity;
}

@keyframes textSlideIn {
  from {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.footer {
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  animation: footerFadeIn var(--duration-footer-fade) ease-out 0.6s both;
  will-change: transform, opacity;
}

.footer p {
  margin-bottom: 15px;
  transition: all var(--duration-transition) ease;
  will-change: transform, color;
}

.footer p:hover {
  color: var(--text-primary);
  transform: translate3d(0, -2px, 0);
}

@keyframes footerFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

a {
  color: var(--primary-start);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: all var(--duration-transition) ease;
  will-change: transform, color;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  transition: width var(--duration-transition) ease;
}

a:hover {
  color: var(--primary-end);
  transform: translate3d(0, -1px, 0);
}

a:hover::after {
  width: 100%;
}

.qq-group {
  display: inline-block;
  margin: 8px 12px;
  padding: 12px 20px;
  background: var(--qq-bg);
  border: 1px solid var(--qq-border);
  border-radius: 12px;
  transition: all var(--duration-transition) ease;
  cursor: pointer;
  will-change: transform, background, box-shadow;
}

.qq-group:hover {
  transform: translate3d(0, -3px, 0) scale3d(1.05, 1.05, 1);
  box-shadow: var(--shadow-qq-hover);
  background: var(--qq-bg-hover);
}

.status-hot {
  color: var(--text-error);
  font-weight: 700;
  animation: pulse var(--duration-pulse) infinite;
}

.status-full {
  color: var(--text-secondary);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 触摸反馈样式 */
.touch-active {
  transform: scale3d(0.95, 0.95, 1) !important;
  transition: transform 0.1s ease-out;
}

.touch-feedback-press {
  transform: scale3d(0.98, 0.98, 1);
  transition: transform 0.1s ease-out;
}

.touch-feedback-release {
  transform: scale3d(1.02, 1.02, 1);
  transition: transform 0.1s ease-out;
}

.touch-feedback-tap {
  animation: touchTap 0.15s ease-out;
}

@keyframes touchTap {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(0.95, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

/* 移动设备特定样式 */
@media (hover: none) and (pointer: coarse) {
  /* 移动设备上的触摸优化 */
  .qq-group {
    min-height: 44px; /* 确保触摸目标足够大 */
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .email-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 移动设备上的按钮样式 */
  button, .btn, [role="button"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  /* 移动设备上的链接样式 */
  a {
    -webkit-tap-highlight-color: transparent;
  }
}

/* 触摸设备的悬停效果替代 */
@media (hover: none) {
  .qq-group:active {
    background: var(--qq-bg-hover);
    transform: scale3d(0.98, 0.98, 1);
    box-shadow: var(--shadow-qq-hover);
  }
  
  .email-link:active {
    background: var(--gradient-primary-strong);
    transform: translateY(0) scale3d(0.98, 0.98, 1);
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  /* 禁用所有动画和过渡效果 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* 禁用触摸反馈动画 */
  .touch-active,
  .touch-feedback-press,
  .touch-feedback-release,
  .touch-feedback-tap {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* 禁用悬停和激活状态的变换 */
  .qq-group:hover,
  .qq-group:active,
  .email-link:active,
  a:hover {
    transform: none !important;
  }
  
  /* 保持基本的视觉反馈，但移除动画 */
  .qq-group:hover {
    background: var(--qq-bg-hover);
    box-shadow: var(--shadow-qq-hover);
  }
  
  .email-link:active {
    background: var(--gradient-primary-strong);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    margin: clamp(5px, 2vw, 10px);
    padding: clamp(25px, 6vw, 30px) clamp(20px, 5vw, 25px);
    border-radius: clamp(16px, 4vw, 20px);
  }
  
  .qq-groups {
    gap: clamp(10px, 2vw, 12px);
  }
  
  .qq-group {
    padding: clamp(10px, 2.5vw, 12px) clamp(15px, 3vw, 18px);
    font-size: var(--font-size-qq-group);
  }
}

@media (max-width: 480px) {
  .container {
    margin: clamp(5px, 1vw, 8px);
    padding: clamp(20px, 5vw, 25px) clamp(15px, 4vw, 20px);
    border-radius: clamp(12px, 3vw, 16px);
  }
  
  .qq-groups {
    gap: clamp(8px, 1.5vw, 10px);
  }
  
  .qq-group {
    padding: clamp(8px, 2vw, 10px) clamp(12px, 2.5vw, 15px);
    font-size: var(--font-size-qq-group);
  }
}